<script lang="ts">
  export let frontImage: string;
  export let backImage: string;
  export let width: string = "300px";
  export let height: string = "400px";
  export let angle: number = 0; // 控制旋转角度
  // 手机屏幕时的宽高比
  const mobileAspectRatio = 0.75; // 3:4
  const isMobile = window.matchMedia("(max-width: 600px)").matches;
  if (isMobile) {
    // 宽度占据屏幕的 75%
    let w = window.innerWidth * 0.7;
    let h = w / mobileAspectRatio;
    width = `${w}px`;
    height = `${h}px`;
  } else {
    width = 300 + "px";
    height = 400 + "px";
  }
</script>

<div
  class="card-wrapper"
  style="--card-width: {width}; --card-height: {height}"
>
  <div class="card-inner" style="transform: rotateY({angle}deg);">
    <img src={frontImage} alt="Front" class="card-image card-front" />
    <img src={backImage} alt="Back" class="card-image card-back" />
  </div>
</div>

<style lang="scss">
  .card-wrapper {
    position: relative;
    width: var(--card-width);
    height: var(--card-height);
    perspective: 1000px;
    transform-style: preserve-3d;
    // 添加阴影
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1s ease;
  }

  .card-image {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    object-fit: cover;
    opacity: 0.95;
  }

  .card-front {
    transform: rotateY(0deg);
    z-index: 2;
  }

  .card-back {
    transform: rotateY(180deg);
    z-index: 1;
  }
</style>
